<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>初心注册</title>
    <link rel="stylesheet" href="./css/logon.css">
</head>

<body>
    <!-- 注册页面开始 -->
    <div id="divbg">
        <div class="register">
            <div class="register-right">
                <h1>初心博客</h1>
                <p>学习是一个不断学习新的知识,忘记旧的知识,</p>
                <p>然后捡起来用到的知识，最后全部忘掉,</p>
                <p>成为自己习惯的过程.</p>
                <p>v1.10</p>
            </div>
            <div class="register-left">
                <h2>欢迎注册</h2>
                <div class="register-left-ipt">
                    <span class="l">&#xe686;</span>
                    <input type="email" placeholder="邮箱" class="email">
                    <span class="emails"></span>
                </div>
                <div class="register-left-ipt">
                    <span class="l">&#xe686;</span>
                    <input type="username" placeholder="用户名" class="use">
                    <span class="uses"></span>
                </div>
                <div class="register-left-ipt">
                    <span class="l">&#xe627;</span>
                    <input type="password" placeholder="用户密码" class="psd">
                    <span class="psds"></span>
                </div>
                <div class="register-left-ipt">
                    <span class="l">&#xe627;</span>
                    <input type="password" placeholder="确认密码" class="spsd">
                    <span class="spsds"></span>
                </div>
                <div class="enter"><a href="#">注册</a></div>
                <span><a href="#">去登录</a></span>
            </div>
        </div>
    </div>
    <!-- 注册页面结束 -->
</body>

</html>
<script src="./dist/jquery-3.4.0.min.js"></script>
<script>
    //邮箱
    $('.email').blur(function() {
        var value = $(this).val().trim();
        var reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
        if (!value) {
            $('.emails').html('请输入邮箱').css({
                color: 'red',
                fontSize: '12px'
            })
        } else if (!reg.test(value)) {
            $('.emails').html('请输入正确的邮箱').css({
                color: 'red',
                fontSize: '12px'
            });
            return false
        } else {
            $('.emails').html('')
        }
    });
    //用户名
    $('.use').blur(function() {
        var value = $(this).val().trim();
        var reg = /^[a-zA-Z]{1}/;
        if (!value) {
            $('.uses').html('请输入用户名').css({
                color: 'red',
                fontSize: '12px'
            })
        } else if (!reg.test(value)) {
            $('.uses').html('请输入正确的用户名').css({
                color: 'red',
                fontSize: '12px'
            })
            return false
        } else {
            $('.uses').html('')
        }
    });
    //输入密码
    var val
    var reg = /^[a-zA-Z]{4,10}$/;
    $('.psd').blur(function() {
        val = $(this).val().trim();
        if (!val) {
            $('.psds').html('请输入密码').css({
                color: 'red',
                fontSize: '12px'
            })
        } else if (!reg.test(val)) {
            $('.psds').html('请输入正确的密码').css({
                color: 'red',
                fontSize: '12px'
            })
            return false
        } else {
            $('.psds').html('')
        }
    });
    //确认密码
    $('.spsd').blur(function() {
            val = $(this).val().trim();
        })
        //背景动图
    var x = 0;
    var divbgTimer = setInterval(function() {
        // console.log(222)
        $('#divbg').css({
            backgroundPositionX: 'x + px',
            x: 'x + 2'
        })
    }, 80)
</script>